<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>首页</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.css">
    <link rel="stylesheet" href="static/css/me.css">
</head>

<body>
<!-- 导航-->
<nav class="ui inverted attached segment m-padded-tb-mini m-container-shadow-small">
    <div class="ui container">
        <div class="ui inverted secondary menu stackable">
            <h1 class="ui blue header item">MH</h1>
            <a href="#" class="active item m-mobile-hidden nav-item">
                <i class="home icon mini"></i>首页
            </a>
            <a href="#" class="item m-mobile-hidden nav-item">
                <i class="idea icon mini"></i>分类
            </a>
            <a href="#" class="item m-mobile-hidden nav-item">
                <i class="tags icon mini"></i>标签
            </a>
            <a href="#" class="item m-mobile-hidden nav-item">
                <i class="clone icon mini"></i>归档
            </a>
            <a href="#" class="item m-mobile-hidden nav-item">
                <i class="info icon mini"></i>关于我
            </a>
            <div class="right item m-mobile-hidden">
                <div class="ui icon inverted  input">
                    <input type="text" placeholder="search">
                    <i class="search link icon"></i>
                </div>
            </div>
        </div>
    </div>

    <!-- nav icon -->
    <a href="" class="ui black icon button m-top-right m-mobile-show menu toggle">
        <i class="sidebar icon mini"></i>
    </a>
</nav>

<!-- 内容 -->
<div class="m-padded-tb-big m-container">
    <div class="ui container">
        <div class="ui grid stackable">
            <!-- content-left -->
            <div class="eleven wide column">
                <!-- content-left-header -->
                <div class="ui segment attached top">
                    <div class="ui grid two column middle aligned">
                        <div class="column left aligned">
                            <h3 class="ui blue header">博客</h3>
                        </div>
                        <div class="column right aligned">
                            共
                            <h2 class="ui header orange m-inline-block m-text-huge"> 14 </h2>
                            篇
                        </div>
                    </div>
                </div>

                <!-- content-left-content -->
                <div class="ui attached segment ">
                    <div class="ui padded segment vertical m-padded-tb-large">
                        <div class="ui grid stackable mobile reversed">
                            <!-- content-left-content-left -->
                            <div class="ui twelve wide column">
                                <!-- content-left-content-left-header -->
                                <h3 class="ui header">GitHub</h3>
                                <p class="m-text">GitHub是通过Git进行版本控制的软件源代码托管服务，由GitHub公司（曾称Logical Awesome）的开发者Chris
                                    Wanstrath、PJ Hyett和Tom
                                    Preston-Werner使用Ruby on Rails编写而成。
                                    GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代...
                                </p>
                                <!-- content-left-content-left-footer -->
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal mini left aligned">
                                            <div class="item">
                                                <img src="./static/images/bg.jpg" alt=""
                                                     class="ui avatar image my-icon"/>
                                                <div class="content">
                                                    <a href="#" class="header">豆芽菜</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2018-05-23
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>250
                                            </div>
                                        </div>
                                    </div>
                                    <div class="five wide column right aligned">
                                        <a href="#" target="_blank" class="ui label blue basic m-padded-tiny ">基础知识</a>
                                    </div>
                                </div>
                            </div>
                            <!-- content-left-content-right -->
                            <div class="ui four wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/bg.jpg" alt="" class="ui rounded image m-image-bg">
                                </a>
                            </div>
                        </div>
                        <div class="ui grid stackable mobile reversed">
                            <!-- content-left-content-left -->
                            <div class="ui twelve wide column">
                                <!-- content-left-content-left-header -->
                                <h3 class="ui header">GitHub</h3>
                                <p class="m-text">GitHub是通过Git进行版本控制的软件源代码托管服务，由GitHub公司（曾称Logical Awesome）的开发者Chris
                                    Wanstrath、PJ Hyett和Tom
                                    Preston-Werner使用Ruby on Rails编写而成。
                                    GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代...
                                </p>
                                <!-- content-left-content-left-footer -->
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal mini left aligned">
                                            <div class="item">
                                                <img src="./static/images/bg.jpg" alt=""
                                                     class="ui avatar image my-icon"/>
                                                <div class="content">
                                                    <a href="#" class="header">豆芽菜</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2018-05-23
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>250
                                            </div>
                                        </div>
                                    </div>
                                    <div class="five wide column right aligned">
                                        <a href="#" target="_blank" class="ui label blue basic m-padded-tiny ">基础知识</a>
                                    </div>
                                </div>
                            </div>
                            <!-- content-left-content-right -->
                            <div class="ui four wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/bg.jpg" alt="" class="ui rounded image m-image-bg">
                                </a>
                            </div>
                        </div>
                        <div class="ui grid stackable mobile reversed">
                            <!-- content-left-content-left -->
                            <div class="ui twelve wide column">
                                <!-- content-left-content-left-header -->
                                <h3 class="ui header">GitHub</h3>
                                <p class="m-text">GitHub是通过Git进行版本控制的软件源代码托管服务，由GitHub公司（曾称Logical Awesome）的开发者Chris
                                    Wanstrath、PJ Hyett和Tom
                                    Preston-Werner使用Ruby on Rails编写而成。
                                    GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代...
                                </p>
                                <!-- content-left-content-left-footer -->
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal mini left aligned">
                                            <div class="item">
                                                <img src="./static/images/bg.jpg" alt=""
                                                     class="ui avatar image my-icon"/>
                                                <div class="content">
                                                    <a href="#" class="header">豆芽菜</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2018-05-23
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>250
                                            </div>
                                        </div>
                                    </div>
                                    <div class="five wide column right aligned">
                                        <a href="#" target="_blank" class="ui label blue basic m-padded-tiny ">基础知识</a>
                                    </div>
                                </div>
                            </div>
                            <!-- content-left-content-right -->
                            <div class="ui four wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/bg.jpg" alt="" class="ui rounded image m-image-bg">
                                </a>
                            </div>
                        </div>
                        <div class="ui grid stackable mobile reversed">
                            <!-- content-left-content-left -->
                            <div class="ui twelve wide column">
                                <!-- content-left-content-left-header -->
                                <h3 class="ui header">GitHub</h3>
                                <p class="m-text">GitHub是通过Git进行版本控制的软件源代码托管服务，由GitHub公司（曾称Logical Awesome）的开发者Chris
                                    Wanstrath、PJ Hyett和Tom
                                    Preston-Werner使用Ruby on Rails编写而成。
                                    GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代...
                                </p>
                                <!-- content-left-content-left-footer -->
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal mini left aligned">
                                            <div class="item">
                                                <img src="./static/images/bg.jpg" alt=""
                                                     class="ui avatar image my-icon"/>
                                                <div class="content">
                                                    <a href="#" class="header">豆芽菜</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2018-05-23
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>250
                                            </div>
                                        </div>
                                    </div>
                                    <div class="five wide column right aligned">
                                        <a href="#" target="_blank" class="ui label blue basic m-padded-tiny ">基础知识</a>
                                    </div>
                                </div>
                            </div>
                            <!-- content-left-content-right -->
                            <div class="ui four wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/bg.jpg" alt="" class="ui rounded image m-image-bg">
                                </a>
                            </div>
                        </div>
                        <div class="ui grid stackable mobile reversed">
                            <!-- content-left-content-left -->
                            <div class="ui twelve wide column">
                                <!-- content-left-content-left-header -->
                                <h3 class="ui header">GitHub</h3>
                                <p class="m-text">GitHub是通过Git进行版本控制的软件源代码托管服务，由GitHub公司（曾称Logical Awesome）的开发者Chris
                                    Wanstrath、PJ Hyett和Tom
                                    Preston-Werner使用Ruby on Rails编写而成。
                                    GitHub同时提供付费账户和免费账户。这两种账户都可以创建公开的代码仓库，但是付费账户还可以创建私有的代...
                                </p>
                                <!-- content-left-content-left-footer -->
                                <div class="ui grid">
                                    <div class="eleven wide column">
                                        <div class="ui link list horizontal mini left aligned">
                                            <div class="item">
                                                <img src="./static/images/bg.jpg" alt=""
                                                     class="ui avatar image my-icon"/>
                                                <div class="content">
                                                    <a href="#" class="header">豆芽菜</a>
                                                </div>
                                            </div>
                                            <div class="item">
                                                <i class="calendar icon"></i>2018-05-23
                                            </div>
                                            <div class="item">
                                                <i class="eye icon"></i>250
                                            </div>
                                        </div>
                                    </div>
                                    <div class="five wide column right aligned">
                                        <a href="#" target="_blank" class="ui label blue basic m-padded-tiny ">基础知识</a>
                                    </div>
                                </div>
                            </div>
                            <!-- content-left-content-right -->

                            <div class="ui four wide column">
                                <a href="#" target="_blank">
                                    <img src="./static/images/bg.jpg" alt="" class="ui rounded image m-image-bg">
                                </a>
                            </div>
                        </div>
                    </div>

                </div>

                <!-- content-left-footer -->
                <div class="ui attached segment bottom">
                    <div class="ui two column grid middle aligned">
                        <div class="column left aligned">
                            <a href="#" class="ui button link blue basic mini">上一页</a>
                        </div>
                        <div class="column right aligned">
                            <a href="#" class="ui button link blue basic mini">下一页</a>
                        </div>
                    </div>
                </div>

            </div>

            <!-- content-right -->
            <div class="five wide column">

                <!-- 1. 分类 -->
                <div class="ui segments">
                    <div class="ui secondary segment">
                        <!-- 分类header -->
                        <div class="ui two column grid aligned">
                            <div class="column left aligned">
                                <i class="idea icon"></i>分类
                            </div>
                            <div class="column right aligned">
                                <a href="#" target="_blank">
                                    more
                                    <i class="angle double right icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- 分类content -->
                    <div class="ui blue segment">
                        <div class="ui vertical fluid menu">
                            <a href="#" class="item">
                                基础知识
                                <div class="ui blue basic left pointing label">100</div>
                            </a>
                            <a href="#" class="item">
                                基础知识
                                <div class="ui blue basic left pointing label">100</div>
                            </a>
                            <a href="#" class="item">
                                基础知识
                                <div class="ui blue basic left pointing label">100</div>
                            </a>
                            <a href="#" class="item">
                                基础知识
                                <div class="ui blue basic left pointing label">100</div>
                            </a>
                            <a href="#" class="item">
                                基础知识
                                <div class="ui blue basic left pointing label">100</div>
                            </a>
                            <a href="#" class="item">
                                基础知识
                                <div class="ui blue basic left pointing label">100</div>
                            </a>
                        </div>
                    </div>
                </div>

                <!-- 2. 标签 -->
                <div class="ui segments m-segments-top">
                    <!-- 标签header -->
                    <div class="ui secondary segment">
                        <div class="ui two column grid aligned">
                            <div class="column left aligned">
                                <i class="tags icon"></i>标签
                            </div>
                            <div class="column right aligned">
                                <a href="#" target="_blank">
                                    more
                                    <i class="angle double right icon"></i>
                                </a>
                            </div>
                        </div>
                    </div>
                    <!-- 标签content -->
                    <div class="ui blue segment">
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">103330</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>
                        <a href="#" class="ui blue basic left pointing label m-margin-tb-tiny">
                            Java
                            <div class="detail">10</div>
                        </a>

                    </div>
                </div>

                <!-- 3. 最新推荐 -->
                <div class="ui segments m-segments-top">
                    <!-- 最新推荐header -->
                    <div class="ui secondary segment ">
                        <div class="ui two column grid aligned">
                            <div class="column left aligned">
                                <i class="bookmark icon"></i>最新推荐
                            </div>
                        </div>
                    </div>
                    <!-- 最新推荐content -->
                    <div class="ui blue segment">
                        <a href="#" target="_blank" class="m-text-color m-text-thin">Java牛逼......</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-text-color m-text-thin">Java牛逼......</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-text-color m-text-thin">Java牛逼......</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-text-color m-text-thin">Java牛逼......</a>
                    </div>
                    <div class="ui segment">
                        <a href="#" target="_blank" class="m-text-color m-text-thin">Java牛逼......</a>
                    </div>
                </div>

                <!-- 4. 关注我-->
                <h3 class="ui horizontal divider header  m-segments-top-tiny">关注我</h3>
                <div class="ui card rounded image my-mark centered">
                    <img src="./static/images/dyc.png" alt="">
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 底部 -->
<footer class="ui inverted vertical center aligned segment m-padded-tb-massive">
    <div class="ui container">
        <div class="ui inverted divided grid stackable">
            <!-- 1.  -->
            <div class="three wide column">
                <div class="ui inverted link list">
                    <div class="item">
                        <img src="./static/images/dyc.png" class="ui rounded image m-image">
                    </div>
                </div>
            </div>
            <!-- 2.  -->
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced m-opacity-mini">
                    <a href="#" class="item">111111111</a>
                    <a href="#" class="item">111111111</a>
                    <a href="#" class="item">111111111</a>
                </div>
            </div>
            <!-- 3.  -->
            <div class="three wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <div class="ui inverted link list m-text-thin m-text-spaced m-opacity-mini">
                    <a href="#" class="item">111111111</a>
                    <a href="#" class="item">111111111</a>
                    <a href="#" class="item">111111111</a>
                </div>
            </div>
            <!-- 4.  -->
            <div class="seven wide column">
                <h4 class="ui inverted header">最新博客</h4>
                <p class="m-text-thin m-text-spaced m-opacity-mini">
                    我们坚信二维码能够帮助我们抹平信息堤坝，让人与人实现更好的信息传递和沟通。二维码可以应用在更多场景，打开线上与线下的入口，给用户带来移动互联网的便利，实现更多的价值。
                </p>
            </div>
        </div>
    </div>
    <div class="ui inverted section divider"></div>
    <p class="m-text-thin m-text-spaced m-opacity-big">豆芽菜不爱吃豆芽</p>
</footer>

</body>

</html>
<script src="static/js/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/semantic-ui/2.2.4/semantic.min.js"></script>
<script>
    $(".menu.toggle").click(function () {
        $(".nav-item").toggleClass('m-mobile-hidden')
    })
</script>